<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 1000px;
				margin: 0 auto;
				display: flex;
			}
			li{
				list-style: none;
			}
			#box>ul{
				width: 20%;
			}
			#box>ul>li{
				height: 40px;
				line-height: 40px;
				text-align: center;
				color: white;
				background-color: blue;
				margin-bottom: 10px;
				cursor: pointer;
				
			}
			#box>ul .active{
				background-color: #FE9901;
				
			}
			#box>ul>li:hover{
				background-color: #FE9901;
			}
			#box>div{
				flex-grow: 1;
				margin-left: 20px;
				padding-top: 20px;
			}
			#box>div>div{
				display:none;
			}
			#box>div .show{
				display: block;
			}
			#list>ul>li:first-of-type{
				list-style-type: square;
			}
			#list>ul>li{
				margin: 6px;
			}
			#list>ul{
				margin-bottom: 20px;
			}
			img{
				width: 20px;
				height: 20px;
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul>
				<li class="active">首页</li>
				<li>录入</li>
				<li>表格展示</li>
				<li>列表展示</li>
			</ul>
			<div id="content">
				<div class="show"><h1>后台管理系统</h1></div>
				<div>
					姓名：<input type="text" name="userName" id="userName" value="" />
					手机号：<input type="text" name="userPhone" id="userPhone" value="" />
					评分：<input type="text" name="userPf" id="userPf" value="" /><br />
					<button class="btn">添加</button>
					
				</div>
				<div>
					<table width="100%" border="1" cellspacing="0">
						<thead>
							<tr>
								<th>姓名</th>
								<th>手机号</th>
								<th>评分</th>
								<th>时间</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
			
						</tbody>
					</table>
					
				</div>
				<div>
					<h2>信息列表展示</h2>
					<div id="list">

					</div>
				</div>
			</div>
			
		</div>
	</body>
	<script type="text/javascript">
		/* 获取页面要操作的元素 */
		var lis = document.querySelectorAll("#box>ul>li");
		var divs = document.querySelectorAll("#box>div>div");
		var userName = document.querySelector("#userName");
		var userPhone = document.querySelector("#userPhone");
		var userPf = document.querySelector("#userPf");
		var btn = document.querySelector(".btn");
		var tbody = document.querySelector("tbody");
		var list = document.querySelector("#list");
		/* 循环添加导航栏点击事件，实现tab切换 */
		for (let i = 0; i < lis.length; i++) {
			lis[i].onclick = function () {
				con(i,this);
			}
		}
		/* 实现tab切换函数 */
		function con(i,el) {
			document.querySelector("#box>ul .active").classList.remove("active");
			document.querySelector("#box>div .show").classList.remove("show");
			el.classList.add("active");
			divs[i].classList.add("show");
		}
		/* 全局变量，存储数据 */
		var datas = [];
		/* 页面加载，判断本地存储情况 */
		window.onload = function () {
			if(localStorage.datas)
			{
				datas = JSON.parse(localStorage.datas);
				show(datas);
				
			}else{
				localStorage.datas = JSON.stringify(datas);
			}
		}
		/* 给添加按钮添加点击事件 */
		btn.onclick = addData;
		/* 添加新数据 */
		function addData() {
			if(userName.value && userPhone.value && userPf.value){
			if(btn.innerText == "添加"){
				
				var data = {
					userName:userName.value,
					userPhone:userPhone.value,
					userPf:userPf.value,
					userDate:new Date()
				}
				datas.push(data);
				localStorage.datas = JSON.stringify(datas);
				userName.value = userPhone.value = userPf.value = "";
				show(datas);
				
				lis[2].onclick();
			}
			}else{
				alert("先输入内容！");
			}
		
		}
		/* 修改数据 */
		function upda(index) {
			if(userName.value && userPhone.value && userPf.value){
				if(btn.innerText == "完成"){
				/* 修改数据 */
				datas[index].userName = userName.value;
				datas[index].userPhone = userPhone.value;
				datas[index].userPf = userPf.value;
				show(datas);
				localStorage.datas = JSON.stringify(datas);
				btn.innerText = "添加";
				btn.onclick  = addData;
				userName.value = userPhone.value = userPf.value = "";
				lis[2].onclick();
			}
			}else{
				alert("先输入内容！");
			}
		}
		/* 渲染页面 */
		function show(arr){
			tbody.innerHTML = '';
			list.innerHTML = '';
				var str = '';
				var str2 = '';
				for (let i = 0; i < arr.length; i++) {
					str += `
						<tr>
							<td>${arr[i].userName}</td>
							<td>${arr[i].userPhone}</td>
							<td>${getPf(arr[i].userPf)}</td>
							<td>${dateFrom(arr[i].userDate)}</td>
							<td> <button onclick="update(${i})">修改</button> <button onclick="del(${i})">删除</button> </td>
						</tr>
					` ;
					str2 += `
					<ul>
						<li>姓名:${arr[i].userName}</li>
						<li>手机号:${arr[i].userPhone}</li>
						<li>评分:${getPf(arr[i].userPf)}</li>
						<li>时间:${dateFrom(arr[i].userDate) }</li>
						<li><button onclick="del(${i})">删除</button></li>
					</ul>
					`
					
				}
				tbody.innerHTML = str;
				list.innerHTML = str2;
		}

		/* 评分图片实现 */
		function getPf(index) {
			let str = '';
			for (let i = 0; i <5; i++) {
				if(i<index){
					str += "<img src='img/微信图片_20210516184258.png' >";
					continue;
				}
				str += '<img src="img/微信图片_20210516184238.png" >';
			}
			return str;
		}
		/* 删除 */
		function del(index) {
			datas.splice(index,1);
			localStorage.datas = JSON.stringify(datas);
			show(datas);
		}
		/* 修改 */
		function update(index) {
			userName.value = datas[index].userName;
			userPhone.value = datas[index].userPhone;
			userPf.value = datas[index].userPf;
		
			lis[1].onclick();
			btn.innerText = "完成";
			btn.onclick =function () {
				upda(index);
			} 
		}
		/* 时间格式转换 */
		function dateFrom(date) {
			var da = new Date(date);
			var mo = (da.getMonth()+1)<10?"0"+(da.getMonth()+1)+"月 ":(da.getMonth()+1)+"月 ";
			var d = (da.getDate())<10?"0"+(da.getDate())+"日 ":(da.getDate())+"日 ";
			var h = (da.getHours())<10?"0"+(da.getHours()):(da.getHours());
			var m= (da.getMinutes())<10?"0"+(da.getMinutes()):(da.getMinutes());
			var s= (da.getSeconds())<10?"0"+(da.getSeconds()):(da.getSeconds());
			return da.getFullYear()+"年"+mo+d+h+":"+m+":"+s;
		}
	</script>
</html>
